<template>
    <div>
        <tool-bar nav="" title='mybatis-sql'></tool-bar>

        <kv label="@Sql">
            <el-input type="textarea" v-model="$data.txt1" autosize></el-input>
        </kv>

        <kv label="转换">
            <el-button @click="toXmlSql">转 xml-sql ⤵</el-button>
            <el-button @click="toJavaSql">转 @sql ⤴</el-button>
        </kv>

        <kv label="Xml-Sql">
            <el-input type="textarea" v-model="$data.txt2" autosize></el-input>
        </kv>

    </div>
</template>
<script setup>
/**
 * Created by CodeGenerator
 */



defineOptions({
    name: "mybatis-sql",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"txt1":"","txt2":"","defValue":false,"nullable":true,"embed":[]});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const toXmlSql = function() {
    $data.txt2 = "";
    jv.$saveData("txt1",$data.txt1);
    jv.$saveData("txt2",$data.txt2);
    var strings = $data.txt1.getQuoteStringIndexes();
    if (!strings.length) {
        $data.txt2 = $data.txt1;
        return;
    }
    if (strings.getLast().end < 0) {
        throw new Error("不完整");
    }
    $data.txt2 = strings
        .map(it => $data.txt1.slice(it.start + 1, it.end).trimWith("\\n").replace("\\t", " "))
        .join("\n")
};
const toJavaSql = function() {
    $data.txt1 = "";
    jv.$saveData("txt2",$data.txt2);
    jv.$saveData("txt1",$data.txt1);
    $data.txt1 = $data.txt2
        .split("\n")
        .map(it => (it.trim().endsWith("}") || it.trim().endsWith(">")) ? ("\"" + it + "\"") : ("\"" + it + "\\n\""))
        .join("\n +")
};

onMounted( function() {
    jv.$loadData("txt1", v=> $data.txt1 = v );
    jv.$loadData("txt2", v=> $data.txt2 = v );
} )



</script>

<style lang="scss" scoped>

::v-deep(.kv>.k) {
    flex:1;
}

::v-deep(.kv>.v>:first-child){
    max-width: unset;
}
.grid {
    position: relative;
    margin-left: 20px !important;
    margin-top: 20px !important;


    ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
        height: 100%;
    }
}

.op_column {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-content: space-around;
    position: relative;
    height: 100%;


    button {
        display: block;
        margin: 10px 6px;
    }

}
</style>